<template>
  <a-drawer
    placement="right"
    :closable="false"
    v-model:visible="visible"
    width="300px"
  >
    <template v-slot:handle>
      <div class="handle">
        <CloseOutlined v-if="visible" @click="showDrawer" />
        <SettingOutlined v-else @click="showDrawer" />
      </div>
    </template>
    <div>
      <div>
        <h2>整体风格定制</h2>
        <a-radio-group
          :value="$route.query.navTheme || 'dark'"
          @change="(e) => handleSettingChange('navTheme', e.target.value)"
        >
          <a-radio value="dark">黑色</a-radio>
          <a-radio value="light">白色</a-radio>
        </a-radio-group>
        <h2>导航模式</h2>
        <a-radio-group
          :value="$route.query.navLayout || 'left'"
          @change="(e) => handleSettingChange('navLayout', e.target.value)"
        >
          <a-radio value="left">左侧</a-radio>
          <a-radio value="top">顶部</a-radio>
        </a-radio-group>
      </div>
    </div>
  </a-drawer>
</template>
<script>
import { defineComponent, ref } from "vue";
import { SettingOutlined, CloseOutlined } from "@ant-design/icons-vue";
export default defineComponent({
  components: {
    SettingOutlined,
    CloseOutlined,
  },

  methods: {
    handleSettingChange(type, value) {
      this.$router.push({ query: { ...this.$router.query, [type]: value } });
    },
  },
  setup() {
    const visible = ref(false);
    const showDrawer = () => {
      visible.value = !visible.value;
    };

    return {
      visible,
      showDrawer,
    };
  },
});
</script>
<style scoped>
.handle {
  position: absolute;
  top: 240px;
  right: 300px;
  width: 48px;
  height: 48px;
  background-color: #1890ff;
  color: #fff;
  font-size: 20px;
  text-align: center;
  line-height: 48px;
  border-radius: 3px 0 0 3px;
}
</style>
